<template>
  <el-menu default-active="3" class="el-menu-vertical-demo margin" :background-color="theme" router @select="chang">
    <el-menu-item index="/sbadmin" class="border">
      <el-row>
        <el-col :span="4">
          <div class="iconsize"><i class="el-icon-star-on font-color"></i> </div>
        </el-col>
        <el-col :span="18">
          <div class="font-color admin">SB ADMIN<sup class="top">2</sup></div>
        </el-col>
      </el-row>
    </el-menu-item>
    <el-menu-item index="/sbadmin" class="border">
      <el-row>
        <el-col :span="4"> <i class="el-icon-odometer color"></i> </el-col>
        <el-col :span="20">
          <div class="font-color dash">Dashboard</div>
        </el-col>
      </el-row>
    </el-menu-item>
    <div class="font_span">INTERFACE</div>
    <el-submenu index="3">
      <template slot="title">
        <i class="el-icon-s-tools color"></i>
        <span class="font-color">Components</span>
      </template>
      <el-menu-item-group >
        <div class="collapse" style="background-color:#fff">
          <div class="bg-white collapse-inner rounded">
            <span class="gray-font">Custom Components:</span>
            <el-menu-item index="/buttons" class="collapse-item">Buttons</el-menu-item>
            <el-menu-item index="/cards" class="collapse-item">Cards</el-menu-item>
          </div>
        </div>
      </el-menu-item-group>
    </el-submenu>
    <el-submenu index="4" class="border">
      <template slot="title">
        <i class="el-icon-location color"></i>
        <span class="font-color">Utilities</span>
      </template>
      <el-menu-item-group>
        <div class="collapse">
          <div class="bg-white collapse-inner rounded">
            <span class="gray-font">Custom Utilities:</span>
            <el-menu-item index="/color" class="collapse-item">Colors</el-menu-item>
            <el-menu-item index="/border" class="collapse-item">Borders</el-menu-item>
            <el-menu-item index="/AnimationsPage" class="collapse-item">Animations</el-menu-item>
            <el-menu-item index="/OtherPage" class="collapse-item">Others</el-menu-item>
          </div>
        </div>
      </el-menu-item-group>
    </el-submenu>
    <div class="font_span">ADDONS</div>
    <el-submenu index="5">
      <template slot="title">
        <i class="el-icon-folder color"></i>
        <span class="font-color">Pages</span>
      </template>
      <el-menu-item-group>
        <div class="collapse ">
          <div class="bg-white collapse-inner rounded">
            <span class="gray-font">LOGIN SCREENS:</span>
            <el-menu-item index="/login" class="collapse-item">Login</el-menu-item>
            <el-menu-item index="/RegisterPage" class="collapse-item">Register</el-menu-item>
            <el-menu-item index="/Fogot_Password" class="collapse-item">Forgot Password</el-menu-item>
            <template slot="title">
              <h6>OTHER PAGES:</h6>
            </template>
            <el-menu-item index="/404" class="collapse-item">404 Page</el-menu-item>
            <el-menu-item index="/BlankPage" class="collapse-item">Blank Page</el-menu-item>
          </div>
        </div>
      </el-menu-item-group>
    </el-submenu>
    <el-menu-item index="6">
      <i class="el-icon-document color"></i>
      <span slot="title" class="font-color">Charts</span>
    </el-menu-item>
    <el-menu-item index="7">
      <i class="el-icon-document color"></i>
      <span slot="title" class="font-color">Tables</span>
    </el-menu-item>
  </el-menu>

</template>

<script>

export default {
  name: 'MenuSide',
  data() {
    return {
      theme:''
    }
  },
   computed: {
    changetheme() {
      return this.$store.state.color
    }
  },
  watch: {
    $route(to, from) {
       this.$emit("changview", to.path);
    },
     changetheme: {
      handler(newval) {
        this.theme =  newval
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    chang(val) {
      this.$emit("chang", val);
    }
  }
}
</script>
<style lang="less" scoped>
#index {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

::-webkit-scrollbar {
  width: 0 !important;
}

.font-color {
  color: #fff;
}

.margin {
  font-size: 13.6px;
  font-family: Nunito;
  font-weight: 400;
  width: 250px;

}

.admin {
  font-size: 16px;
  font-weight: 800;
}

.top {
  font-size: 10px;
  font-weight: 400;
  margin-left: 5px;
}

.el-menu-item * {
  vertical-align: top;
}

.dash {
  font-size: 13.6px;
  font-weight: 400
}

.color {
  color: rgb(204, 224, 244)
}

.border {
  border-bottom: 0.6px solid rgb(225, 225, 225) !important;
}

.font_span {
  padding-left: 20px;
  margin: 5px;
  font-size: 10px;
  color: rgba(255, 255, 255, );
  font-size: 10.4px;
  font-weight: 800
}

.left_aside {
  width: 220px;
}

.collapse {
  left: 0;
  z-index: 1;
  top: 0;
  animation: none;
}

.el-menu-item-group .el-menu-item.is-active {
  color: black;
  background-color: #dddfeb !important;
}

.rounded {
  border-radius: 20px !important;
}

.bg-white {
  color: black;
}

.gray-font {
  // margin: 1rem;
  white-space: nowrap;
  padding: 2px 2px 2px 8px;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 10.4px !important;
  color: #b7b9cc;
}

.collapse {
  margin: 0 16px;
  padding: 5px;
  background-color: #fff;
  border-radius: 20px !important;
  width: 160px !important;
}

.collapse-inner {
  background-color: #fff;
}

.el-submenu .el-menu-item[data-v-0f61b6f4] {
  min-width: 160px !important;
  border-radius: 4px !important;
}

.collapse-item {
  background-color: #fff !important;
  padding: 5px 5px 10px 10px !important;
  display: block;
  color: rgb(58, 59, 69);
  width: 30px !important;
  text-decoration: none;
  border-radius: 5.6px;
  white-space: nowrap;
  color: rgb(58, 59, 69);
  font-size: 12px;
  font-weight: 400;
  height: 40px !important;
}

.el-submenu .el-menu-item {
  min-width: 170px !important;
  border-radius: 5.6px !important;
}

.button-round {
  display: inline;
  text-align: center;
}

#sidebarToggle {
  /* background-color: #fff; */
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 1rem;
  cursor: pointer;
  margin-left: 5rem;
  margin-top: 1rem;
  opacity: 0.2;
}

.rounded-circle {
  border-radius: 50% !important;
}

.border-0 {
  border: 0 !important;
}

.el-icon-arrow-left {

  font-weight: bold;
}

.navbar-right {
  margin: 0 0 0 auto;
  /* border: solid black; */
  width: 300px;
}

.iconMessage {
  position: relative;
}

.el-icon-message-solid {
  font-size: 16px;
}

.el-menu-item [class^="el-icon-star-on"] {
  font-size: 30px !important;
}
</style>